<template>

  <div>


  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="addClassHandler">添加班级</el-button>
    </el-form-item>
    <el-form-item label="授课老师:">
      <el-select style="width: 140px" v-model="searchMapRef.teacher_id">
        <el-option v-for="u in tearchList" :label="u.name" :value="u._id" :key="u._id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="学管老师:">
      <el-select style="width: 140px" v-model="searchMapRef.manager_id">
        <el-option v-for="u in manageList" :label="u.name" :value="u._id" :key="u._id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <!-- 添加班级  / 查找班级-->
  <!-- 展示班级 -->
  <el-table :data="classList" style="margin: 20px 0">
    <el-table-column type="index" label="索引" width="100"></el-table-column>
    <el-table-column label="班级名称" prop="classname"></el-table-column>
    <el-table-column label="授课老师">
      <template #default="scope">{{
        tearchList.find((user) => user._id === scope.row.teacher_id)?.name
      }}</template>
    </el-table-column>
    <el-table-column label="学管老师">
      <template #default="scope">
        {{ manageList.find((user) => user._id === scope.row.manager_id)?.name }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" @click="updateClassHandler(scope.row)">修改</el-button>
        <el-popconfirm title="确定删除此班级?" @confirm="delClass(scope.row._id)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 翻页 -->
  <el-pagination v-model:current-page="nowPageRef" v-model:page-size="sizeRef" :page-sizes="[5, 10, 20, 50]"
    layout="total, sizes, prev, pager, next, jumper" :total="totalRef"></el-pagination>
  <!-- 弹窗 -->
  <el-dialog :title="titleRef" v-model="dialogRef" @close="close" width="500">
    <el-form :model="classForm" :rules="formRules" ref="classEle">
      <el-form-item label="班级名称" prop="classname">
        <el-input v-model="classForm.classname"></el-input>
      </el-form-item>
      <!-- 授课老师 -->
      <el-form-item label="授课老师" prop="teacher_id">
        <!-- 把所有老师进行选择 -->
        <el-select v-model="classForm.teacher_id">
          <el-option v-for="u in tearchList" :label="u.name" :value="u._id" :key="u._id" ></el-option>
        </el-select>
      </el-form-item>
      <!-- 学管老师 -->
      <el-form-item label="学管老师" prop="manager_id">
        <el-select v-model="classForm.manager_id">
          <el-option v-for="u in manageList" :label="u.name" :value="u._id" :key="u._id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="addOrUpdate">确定</el-button>
      <el-button type="danger" @click="close">取消</el-button>
    </template>
  </el-dialog>

</div>
</template>

<script setup lang="ts">
//@ts-ignore
import { useRoleStore } from "@/store/useRoleStore"
import { useAUClass } from "./useAUClass"
//@ts-ignore

//@ts-ignore
import { storeToRefs } from "pinia"
//@ts-ignore

import type { USER } from "@/types/user"
//@ts-ignore
import { computed, onMounted, ref } from "vue"
//@ts-ignore
import { reqGetAllUser } from "@/api/reqUser"
//@ts-ignore
import { useShowClass } from "./useShowClass"
//@ts-ignore
import { reqDelClass } from "@/api/reqClass"
import { ElMessage } from "element-plus"
//@ts-ignore
import { useUsersStore } from "@/store/useUsersStore"

const usersStore = useUsersStore()
const { tearchList,
  manageList,
} = storeToRefs(usersStore)

const {
  classList,
  nowPageRef,
  sizeRef,
  totalRef,
  changeRef,
  searchMapRef,
  reset,
} = useShowClass()
const {
  titleRef,
  dialogRef,
  classForm,
  formRules,
  classEle,
  close,
  addClassHandler,
  updateClassHandler,
  addOrUpdate,
} = useAUClass(changeRef)

const delClass = async (classId: string) => {
  const { status } = await reqDelClass(classId)
  if (status === 0) {
    ElMessage.success("删除成功")
    changeRef.value = !changeRef.value
  }
}

const search = () => {
  if (searchMapRef.value.manager_id || searchMapRef.value.teacher_id) {
    changeRef.value = !changeRef.value
  }
}
</script>

<style></style>
